<template>
	<view id="order">
		<view>
			<u-navbar title="取餐" :autoBack="true"></u-navbar>
		</view>
		<view class="blank"></view>
		
		<uni-card mode="style" :is-shadow="true">
			<view class="state card">
				
				<!-- <text v-else>订单已结束</text> -->
				<view class="top">
					<view v-if="orderStatus===0">
						<view class="orderstate" >
							<text >订单进行中</text>
						</view>
						<view class="headnum">
							<text>取餐号</text>
						</view>
						<view class="ordernumber">
							<text>B11</text>
						</view>
					</view>
					
					<view v-else>
						<view class="orderstate" >
							<text>订单已结束</text>
						</view>
						<view class="welcome">
							欢迎再次光临
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		
		<uni-card mode="style" :is-shadow="true">
			<view class="items card">
				<template v-for="(item,index) in Dish">
					<view class="itemli" :key="index">
						<view class="itemimg">
							<image class="itemimage" :src="item.dishAvatar"></image>
						</view>
						<view class="itemcontent">
							<view class="itemcontentname">{{ item.dishName }}</view>
							<view class="itemcontentnote">{{ item.userComment }}</view>
						</view>
						<view class="itemquantity">
							<view class="itemprice">￥{{ item.dishPrice }}</view>
							<view class="itemcount">x{{ item.dishNum }}</view>
						</view>
					</view>
				</template>
				<view class="itemstotal">
					<view>小计￥<text class="itemstotalprice">111</text></view>
					<!-- <view>小计￥<text class="itemstotalprice">{{ totalPrice.toFixed(2) }}</text></view> -->
				</view>
			</view>
		</uni-card>

		<uni-card mode="style" :is-shadow="true">
			<view class="orderinfo card">
				<template v-for="(key,val,index) in orderinfo">
					<view class="orderinfoli" :key="index">
						<view class="orderinfokey">
							<text>{{val}}</text>
						</view>
						<view class="orderinfoval">
							<text>{{key}}</text>
						</view>
					</view>
				</template>
			</view>
		</uni-card>
		
	</view>
</template>

<script>
	// import currentorder from "./components/currentorder.vue"
	// import pastorder from "./components/pastorder.vue"
	// import noorder from "./components/noorder.vue"
	export default {
		name: "order",
		components:{

		},
		data() {
			return {
				orderId:'',
				orderStatus:0,
				orderTakingNum:'',
				
				currentTab: 'currentorder',
				hasordernow:true,
				navbartitle:'取餐',
				
				Dish: [{
						dishName: '麻婆豆腐',
						dishNum: 1,
						dishPrice: 23,
						userComment: "不放葱，多辣，味道不要太adadsdadasdadaddasdsds咸",
						dishAvatar: "../../../static/img/cart/mpdf.png"
					}
				],
				orderinfo: {
					'订单编号:': '2021100155177670',
					'下单时间:': '2021-10-01 12:20:05',
					'支付方式:': '微信',
					'支付时间:': '2021-10-01 12:20:13'
				}
				
			};
		},
		mounted(){
			
		},
		onShow(){
			var _this = this
			uni.request({
				url:_this.$store.state.IP+"/order/Dish/"+_this.orderId,
				method:"GET",
				success(res) {
					console.log(res.data.msg)
					_this.Dish = res.data.msg
				}
				
			})
		},
		onLoad: function(option){
			this.orderId = option.orderId
			console.log("orderId:"+option.orderId)
		}
	}
</script>

<style scoped>
	.blank{
		height: 80rpx;
	}
	#order{
		min-height: 100vh;
		/* padding-bottom: 2vh; */
		background-color: #f0f0f0;
	}

	#tabs {
		width: 100vw;
		/* height: 5vh; */
		font-size: 32rpx;
		/* padding: 1vh 0; */
		display: flex;
		text-align: center;
		background-color: #ffffff;
	}

	.tab {
		flex: 1;
		padding: 1vh 0;
	}

	.tabactive {
		/* padding-bottom: 1vh; */
		border-bottom: 8rpx #007AFF solid;
		color: #007AFF;
	}
	#tabcontent{
		height: 78vh;
		width: 100vw;
		padding-top: 1vh;
		overflow: scroll;
	}
	
	
	
	.state {
		text-align: center;
	}
	
	.orderstate {
		font-size: 48rpx;
		font-weight: bold;
		margin: 0 3vh;
		padding: 2vh 0;
		border-bottom: 4rpx #808080 solid;
	}
	.welcome{
		margin-top: 50rpx;
		font-size: 48rpx;
		font-weight: bold;
		margin: 0 3vh;
		padding: 2vh 0;
	}
	
	.headnum {
		font-size: 32rpx;
		padding-top: 3vh;
	}
	
	.ordernumber {
		margin-top: 1vh;
		color: #009900;
		font-size: 48rpx;
		font-weight: bold;
		padding: 1vh 0 3vh 0;
	}
	
	.top{
		height: 280rpx;
	}
	.items {
		padding: 2vh 2vw;
	}
	.card {
		margin: 1vh 5vw;
		background-color: #ffffff;
	}
	.itemli {
		display: flex;
		margin: 1vh;
	}
	
	.itemimg {
		flex: 1 1 auto;
		padding: 1vw;
	}
	
	.itemimage {
		height: 16vw;
		width: 16vw;
	}
	
	.itemcontent {
		flex: 4 1 auto;
		padding: 1vw;
		width: 50%;
	}
	
	.itemcontentname {
		font-weight: bold;
		margin-bottom: 1vw;
	}
	
	.itemcontentnote {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.itemquantity {
		padding: 1vw;
		flex: 1 1 auto;
		text-align: right;
	}
	
	.itemprice {
		font-weight: bold;
	}
	
	.itemstotal {
		display: flex;
		justify-content: flex-end;
	}
	
	.itemstotalprice {
		font-weight: bold;
		font-size: 36rpx;
	}
	
	.orderinfo{
		padding: 1vh;
	}
	.orderinfoli{
		display: flex;
		margin: 1vw;
		padding: 1vw;
		justify-content: space-between;
	}
	.orderinfokey{
		font-weight: bold;
	}
	
</style>
